<template>
  <el-row>
    <el-col>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="任务编号">
          <el-input placeholder="请输入任务编号"></el-input>
        </el-form-item>
        <el-form-item label="任务类型">
          <el-select  placeholder="类型筛选">
            <el-option label="考试" value="0"></el-option>
            <el-option label="作业" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select  placeholder="状态筛选">
            <el-option label="全部" value="null"></el-option>
            <el-option label="停用" value="1"></el-option>
            <el-option label="未停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="reset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <el-button type="success" :icon="Plus" @click="addjob()">
    新增
  </el-button>
  <el-button type="danger" :icon="Delete">
    删除
  </el-button>

  <el-row>
    <el-col>
      &nbsp;
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      <el-table :data="data" style="width: 100%"
                height="330"
                header-cell-style="background:#f8f8f9;color:#535a6c"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" sortable label="任务编号" width="120px"/>
        <el-table-column prop="createId" sortable label="创建者" width="120px">
          <template #default="scope">
            <UserNameById :id="scope.row.createId"></UserNameById>
          </template>
        </el-table-column>
        <el-table-column prop="type" sortable label="任务类型" width="120px">
          <template #default="scope">
            <JobTypeTag :type="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" sortable label="创建时间" width="180px"/>
        <el-table-column prop="startTime" sortable label="开始时间" width="180px"/>
        <el-table-column prop="endTime" sortable label="结束时间" width="180px"/>
        <el-table-column prop="score" sortable label="任务总分" width="120px"/>
        <el-table-column prop="status" sortable label="任务状态" width="120px">
          <template #default="scope">
            <StatusTag :status="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column prop="deptId" sortable label="部门编号" width="120px"/>
        <el-table-column prop="remarks" sortable label="备注" width="150px"/>
        <el-table-column fixed="right" prop="operate" label="操作" width="180px">
          <template #default="scope">
            <el-button-group>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑此任务"
                  placement="top"
              >
                <el-button type="primary" :icon="Edit" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除此任务"
                  placement="top"
              >
                <el-button :icon="Delete" type="danger" size="small" @click="fakeDelete(scope.row.id)"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="停用此任务"
                  placement="top"
              >
                <el-button type="warning" size="small" :icon="Remove"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog v-model="addDialog" title="添加任务" width="400px" center>
    <el-form ref="formRef" :model="jobId" label-width="120px">
      <el-form-item label="任务编号">
        <el-input v-model="jobId" disabled></el-input>
      </el-form-item>
      <el-form-item label="任务类型">
        <el-select v-model="jobType" class="m-2" placeholder="Select" size="large">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="toAddJob" :disabled="jobType===''">开始编写内容</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script setup>
import {Search, Refresh, Plus, Remove, Edit, Delete} from '@element-plus/icons-vue'
import UserNameById from "@/components/user/UserNameById";
</script>
<script>
import StatusTag from "@/components/table/StatusTag";
import {fakeDeleteJob, selectAllJob} from "@/api/job";
import JobTypeTag from "@/view/job/JobTypeTag";
import router from "@/router/router";
const {ElMessage} = require("element-plus");

export default {
  name: "JobPage",
  components: {StatusTag, JobTypeTag},
  data() {
    return {
      jobType:'',
      options:[{
        label:'作业',
        value:1,
      },{
        label:'考试',
        value:0,
      }],
      data: '',
      addDialog: false,
      jobId:''
    }
  },
  mounted() {
    this.getJob();
  },
  methods: {
    toAddJob() {
      router.push({path:'/admin/platform/jobEditPage/'+this.jobId+'/'+this.jobType})
    },
    addjob() {
      this.addDialog = true;
      this.jobId = this.uuid2(20,9)
    },
    uuid2(len, radix) {
      var chars = '0123456789'.split('');
      var uuid = [],
          i;
      radix = radix || chars.length;

      if (len) {
        // Compact form
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
      } else {
        // rfc4122, version 4 form
        var r;

        // rfc4122 requires these characters
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';

        // Fill in random data.  At i==19 set the high bits of clock sequence as
        // per rfc4122, sec. 4.1.5
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | Math.random() * 16;
            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
          }
        }
      }

      return uuid.join('');
    },
    async getJob() {
      const t = await selectAllJob();
      this.data = t.data.data
    },
    async fakeDelete(id){
      const t = await fakeDeleteJob(id);
      if(t.data.code === 200){
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      }
    }
  },
  computed: {
    getData() {
      return this.data;
    }
  }
}
</script>

<style scoped>

</style>